<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
    工程名：MealOrder
    时间： 17-2-21
    作者：白雨濃 evil
    邮箱：evilbai@foxmail.com
    内容：
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--去除多余空格--%>
<%@ page trimDirectiveWhitespaces="true" %>
<%--h5声明--%>
<div class="container">
    <div class="navigation">
        <ol class="breadcrumb">
            <li><a href="#">基本信息</a></li>
            <li class="active">饭店基本信息</li>
        </ol>
    </div>

    <ul class="nav nav-tabs nav-justified">
        <c:forEach items="${mealTypeList}" var="type" varStatus="i">
            <c:choose>
                <c:when test="${i.index==0}">
                    <li class="active"><a href="#" content="${type.mealTypeId}">${type.type}</a></li>
                </c:when>
                <c:otherwise>
                    <li><a href="#" content="${type.mealTypeId}">${type.type}</a></li>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        <li>
            <button id="type-list-btn" class="btn btn-sm btn-default img-circle">
                <span class="glyphicon glyphicon-edit"> 修改类型</span>
            </button>
        </li>
    </ul>

    <div id="meal-list" class="hidden">
        <div class="meal-list-add">
            <button id="add-meal" class="btn btn-info">
                <span class="glyphicon glyphicon-plus"></span> 添加菜品
            </button>
        </div>

        <ul>
            <li v-for="meal in list">
                <div class="meal-item material-card material-hover material-shadow-1">
                    <img class="meal-item-close" :class="{ hidden: meal.market }" :src="'/static/image/'+'close.png'">
                    <div class="meal-item-btn">
                        <button class="btn btn-default btn-sm" title="修改"
                                @click="fix_meal(meal)">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                        <button class="btn btn-default btn-sm" title="菜品时间"
                                @click="show_time(''+meal.name , ''+meal.addDateTime , ''+meal.fixDateTime)">
                            <span class="glyphicon glyphicon-time"></span>
                        </button>
                        <button class="btn btn-default btn-sm" title="菜品显隐性"
                                @click="updateMarket(meal.mealId,meal.market,$event)">
                            <span class="glyphicon"
                                  :class="[ meal.market ? 'glyphicon-eye-open' : 'glyphicon-eye-close' ]"></span>
                        </button>
                    </div>
                    <div class="meal-item-img">
                        <img :src="'/static/upload/img/meal/'+JSON.parse(meal.imgs)[0]">
                    </div>
                    <div class="meal-item-title">
                        <h4>ID:<span>{{ meal.mealId }}</span> {{ meal.name }}</h4>
                        <p style="height: 40px;overflow: hidden;">{{ meal.synopsis }}</p>
                        <p style="width: 500px">
                            <span class="label label-warning">{{ meal.mealType.type }}</span>
                            &nbsp;&nbsp;&nbsp;
                            <span class="label label-info">{{ meal.cookType.type }}</span>
                            <span class="pull-right text-warning" style="margin-right: 30px">
                                ￥{{ (meal.price/100).toFixed(2) }}元
                            </span>
                        </p>
                    </div>
                    <div class="meal-item-other">
                        <p>其他信息：
                            <span>预计成本：{{ meal.cost==null||meal.cost==''?'空 ':meal.cost }}</span>
                            &nbsp;&nbsp;&nbsp;
                            <span>上市时间：{{ meal.monthToMarket==null||meal.monthToMarket==''?'空 ':meal.monthToMarket+'（月）' }}</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<!--类型列表窗口-->
<div id="type-list-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="listLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="listLabel">修改基础菜品类型</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover">
                    <caption>
                        <span>基础菜品类型</span>
                        <span style="color: #E00903">添加后禁止删除，请谨慎操作！</span>
                        <button id="add-type" class="btn btn-xs btn-default pull-right">
                            <span class="glyphicon glyphicon-plus-sign"></span> 添加
                        </button>
                    </caption>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>类型</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--添加或修改类型窗口-->
<div id="fix-type-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fixLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="fixLabel">修改基础菜品类型</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center">
                    <label for="type-text">类型：</label>
                    <input id="type-text" type="text">
                    <button id="type-submit" class="btn btn-xs btn-success"> 确认</button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--新增或修改菜品窗口-->
<div id="meal-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mealLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="mealLabel" v-html="title"></h4>
            </div>
            <div class="modal-body">
                <form class="input form-horizontal" role="form" enctype="multipart/form-data">
                    <input id="meal-id" name="id" type="hidden" :value="meal.mealId">

                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">名称</label>
                        <div class="col-sm-7">
                            <input id="name" name="name" type="text" class="form-control input-sm"
                                   placeholder="请输入菜品名称" :value="meal.name">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="synopsis" class="col-sm-3 control-label">简介</label>
                        <div class="col-sm-7">
                            <textarea id="synopsis" name="synopsis" class="form-control input-sm"
                                      rows="2" title="简介" placeholder="请输入简介"
                                      :value="meal.synopsis"></textarea>
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mealType" class="col-sm-3 control-label">类型</label>
                        <div class="col-sm-3">
                            <select id="mealType" name="mealTypeId" class="form-control input-sm"
                                    v-model="selectMealTypeId">
                                <option></option>
                                <option v-for="type in mealType" :value="type.mealTypeId">
                                    {{ type.state?type.type:type.type+'（关闭）' }}
                                </option>
                            </select>
                            <span class="help-block"></span>
                        </div>

                        <label for="cookType" class="col-sm-2 control-label">负责厨师</label>
                        <div class="col-sm-3">
                            <select id="cookType" name="typeOfWorkId" class="form-control input-sm"
                                    v-model="selectCookTypeId">
                                <option></option>
                                <option v-for="type in cookType" :value="type.typeOfWorkId">
                                    {{ type.state?type.type:type.type+'（关闭）' }}
                                </option>
                            </select>
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="price" class="col-sm-3 control-label">价格(元)</label>
                        <div class="col-sm-3">
                            <input id="price" name="price" type="number" class="form-control input-sm"
                                   placeholder="请输入菜品价格(元)" :value="meal.price!=null?(meal.price/100).toFixed(2):''">
                            <span class="help-block"></span>
                        </div>

                        <label for="cost" class="col-sm-2 control-label">成本(元)</label>
                        <div class="col-sm-3">
                            <input id="cost" name="cost" type="number" class="form-control input-sm"
                                   placeholder="请输入预计成本(元)" :value="meal.cost!=null?(meal.cost/100).toFixed(2):''">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mealMonthStart" class="col-sm-3 control-label">上市时间</label>
                        <div class="col-sm-2">
                            <select id="mealMonthStart" name="mealMonthStart"
                                    class="form-control input-sm" v-model="selectMonthStart">
                                <option></option>
                                <option v-for="m in month">{{ m }}</option>
                            </select>
                            <span class="help-block"></span>
                        </div>

                        <label for="mealMonthEnd" class="col-sm-2 control-label">月 到</label>
                        <div class="col-sm-2">
                            <select id="mealMonthEnd" name="mealMonthEnd"
                                    class="form-control input-sm" v-model="selectMonthEnd">
                                <option></option>
                                <option v-for="m in month">{{ m }}</option>
                            </select>
                            <span class="help-block"></span>
                        </div>
                        <label for="mealMonthEnd" class="col-sm-1 control-label">月</label>
                    </div>

                    <div class="form-group">
                        <label for="img" class="col-sm-3 control-label">图片</label>
                        <div class="col-sm-3">
                            <input id="img" name="img" type="file">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <img v-if="meal!=null&&meal.imgs!=null" class="center-block"
                         :src="'/static/upload/img/meal/' + JSON.parse(meal.imgs)[0]"
                         width="200px">
                </form>
            </div>
            <div class="modal-footer">
                <button id="meal-submit" type="button" class="btn btn-info">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script src="<c:url value="/static/js/jquery.form.min.js"/>"></script>
<script src="<c:url value="/static/js/vue.min.js"/>"></script>
<script src="<c:url value="/static/js/setting_meal.js"/>"></script>